<template>
 <div class="songs">
   <div v-for="(item,index) in songs" class="song-item" @click="play(item)">
     <img src="../../assets/img/music/content/songs.svg" alt="">
     <div>
      <div>{{item.song}}</div>
      <div>{{item.singer}}</div>
     </div>
     <img class="play" src="../../assets/img/music/tabbar/play.svg" alt="">
   </div>
   <audio controls autoplay :src="URL"></audio>
 </div>
</template>

<script>

export default {
  name: '',
  props:{
    songs:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data () {
    return {
      URL:''
    }
  },
  methods:{
  play(item){
    this.URL = item.src
  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.songs{
  height: 200px;
}
.song-item{
  display: flex;
  margin-top: 20px;
}
.song-item div{
  margin-left: 10px;
  flex: 1;
}
.song-item img{
  margin-left: 10px;
  width: 40px;
  height: 40px;
}

</style>